<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>聊天对话框</title>
    <style type="text/css">
      * {
        font-size: 14px;
        padding: 0;
        margin: 0;
      }
      .main {
        position: relative;
        margin: 20px auto;
        border: 1px solid steelblue;
        width: 430px;
        height: 400px;
      }
      .msgInput {
        display: block;
        width: 406px;
        height: 60px;
        margin: 10px auto;
      }
      .sendbtn {
        position: absolute;
        width: 100px;
        height: 29px;
        bottom: 5px;
        right: 10px;
      }
      .content {
        list-style: none;
        width: 410px;
        height: 280px;
        margin: 5px auto;
        border: 1px dotted #d1d3d6;
        overflow-y: scroll;
      }
      .msgContent {
        width: auto;
        max-width: 250px;
        height: auto;
        word-break: break-all;
        margin: 5px;
        padding: 3px;
        border-radius: 5px;
      }

      .content .left {
        float: left;
        text-align: left;
        background-color: lightgrey;
      }
      .content .right {
        float: right;
        text-align: right;
        background-color: yellowgreen;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        var input = document.getElementById("msg_input"); //查找缓存
        document.getElementById("sendbtn").onclick = function () {
          //var input1 = document.getElementById('msg_input');//
          //input0

          sendMsg();
        };

        //快捷键 发送
        document.onkeydown = function (event) {
          var e = event || window.event;
          var keycode = e.keyCode || e.which;
          console.log(keycode, e.ctrlKey);
          if (e.ctrlKey == true && e.keyCode == 13) {
            //判断同时按下ctrl 和enter
            sendMsg();
          }
        };

        function sendMsg() {
          var input = document.getElementById("msg_input"); //查找缓存
          var ul = document.getElementById("content");

          var newLi = document.createElement("li");
          newLi.innerHTML = input.value;
          newLi.className = "msgContent right";
          ul.appendChild(newLi);

          var div = document.createElement("div");
          div.style = "clear:both";
          ul.appendChild(div);

          input.value = "";

          newLi.scrollIntoView(); //将元素滚动到可见位置
        }
      };
    </script>
  </head>

  <body>
    <div id="main" class="main">
      <ul id="content" class="content">
        <li class="msgContent left">hello?</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hello</li>
        <div style="clear: both"></div>
        <li class="msgContent right">hi</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hehe</li>
        <div style="clear: both"></div>
        <li class="msgContent left">goodbye</li>
        <div style="clear: both"></div>
        <li class="msgContent right">。。。。</li>
        <div style="clear: both"></div>
        <li class="msgContent right">
          sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd
          fasdfasdfasdf
        </li>
        <div style="clear: both"></div>
        <li class="msgContent right">哈哈</li>
        <div style="clear: both"></div>
      </ul>
      <textarea id="msg_input" class="msgInput"></textarea>
      <button id="sendbtn" class="sendbtn">发送</button>
    </div>
  </body>
</html>
